<script>
import NPCWithProps from "./non-page-components/NPCWithProps.vue"
import NPCWithEvent from "./non-page-components/NPCWithEvent.vue"

export default {
  data: function () {
    return {
      testProps: 'text from data'
    }
  },
  methods: {
    callback: function (data) {
      console.log('callback = ', data);
      window.alert('callback = ' + data);
    }
  },
  components: {
    NPCWithProps,
    NPCWithEvent
  }
}
</script>

<template>
  <div> Ref: https://v3.cn.vuejs.org/guide/component-basics.htm </div>

  <h1> 1. Use Components with Props </h1>

  <div> props: input = {{ testProps }}</div>
  <NPCWithProps :input="testProps" />

  <div> props: input = text from value</div>
  <NPCWithProps input="text from value" />

  <h1> 2. Use Components with Event </h1>

  <NPCWithEvent @eventName="callback" />

  <NPCWithEvent @event-name="callback" />

</template>

<style scoped>
.basic {
  color: #FF0000;
}
.bold {
  font-weight: bold;
}
</style>
